<template>
  <page-container>
    <a-spin :spinning="spinning">
      <a-card size="small" style="position: relative">
        <img
          src="~@/assets/image/statistics/ai.svg"
          class="handleIcon"
          alt=""
          v-if="detailData.classifyType == 1"
        />
        <img
          src="~@/assets/image/statistics/jie.svg"
          class="handleIcon"
          alt=""
          v-if="detailData.classifyType == 2"
        />
        <img
          src="~@/assets/image/statistics/fan.svg"
          class="handleIcon"
          alt=""
          v-if="detailData.classifyType == 3"
        />
        <a-row>
          <a-col :span="17" style="width: 1000px">
            <a-card size="small" :bordered="false" style="color: #b9c4dd">
              <template #title>
                <span
                  style="
                    font-size: 18px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    line-height: 22px;
                    color: #ffffff;
                    opacity: 1;
                  "
                >
                  {{ detailData.modelName }}
                </span>
                <!-- <span style="margin-left: 50px">反馈所覆盖类别</span> -->
              </template>
              <div>
                <div style="height: 100%">
                  <div v-for="(item, index) in detailData.rule" :key="index" style="display: flex">
                    <div style="width: 90px">预警规则{{ index + 1 }}：</div>
                    <div style="width: 95%">
                      <span
                        :title="item.xqdwCode"
                        style="margin: 0 6px 0 0"
                        v-if="item.xqdwCode.length && item.xqdwCode[0] != ''"
                      >
                        <span
                          v-for="(o, ind) in item.xqdwCode"
                          :key="ind"
                          style="margin-right: 4px"
                        >
                          {{ o }}
                        </span>
                      </span>
                      <span v-else style="margin-right: 6px">全部辖区</span>

                      <span
                        :title="item.classifyCode"
                        style="margin: 0 6px 0 0"
                        v-if="item.classifyCode.length && item.classifyCode[0] != ''"
                      >
                        <m-tag
                          :type="
                            detailData.classifyType == '1'
                              ? 'ai'
                              : detailData.classifyType == '2'
                              ? 'jq'
                              : 'fk'
                          "
                          v-for="(o, i) in item.classifyCode"
                          :key="i"
                        >
                          {{ o }}
                        </m-tag>
                      </span>

                      <span
                        :title="item.callSummaryCode"
                        style="margin: 0 6px 0 0"
                        v-if="item.callSummaryCode.length && item.callSummaryCode[0] != ''"
                      >
                        <m-tag
                          :type="
                            detailData.classifyType == '1'
                              ? 'ai'
                              : detailData.classifyType == '2'
                              ? 'jq'
                              : 'fk'
                          "
                          v-for="(o, i) in item.callSummaryCode"
                          :key="i"
                        >
                          {{ o }}
                        </m-tag>
                      </span>

                      <span
                        :title="item.dealSummaryCode"
                        style="margin: 0 6px 0 0"
                        v-if="item.dealSummaryCode.length && item.dealSummaryCode[0] != ''"
                      >
                        <m-tag
                          :type="
                            detailData.classifyType == '1'
                              ? 'ai'
                              : detailData.classifyType == '2'
                              ? 'jq'
                              : 'fk'
                          "
                          v-for="(o, i) in item.dealSummaryCode"
                          :key="i"
                        >
                          {{ o }}
                        </m-tag>
                      </span>
                      <span v-if="item.type == 'T'">
                        类型警情
                        <span style="color: #60b5ff">{{ setPeriod(item.period) }}</span>
                        <span style="color: #60b5ff">同比</span>
                        <span
                          :class="
                            item.level == '1'
                              ? 'yjhong'
                              : item.level == '2'
                              ? 'yjcheng'
                              : item.level == '3'
                              ? 'yjhuang'
                              : 'yjlan'
                          "
                        >
                          {{ `${item.percent}%` }}
                          <img src="@/assets/ht.png" alt="" v-if="item.level == 1" class="imgps" />
                          <img src="@/assets/lt.png" alt="" v-if="item.level == 4" class="imgps" />
                          <img
                            src="@/assets/huangt.png"
                            alt=""
                            v-if="item.level == 3"
                            class="imgps"
                          />
                          <img src="@/assets/ct.png" alt="" v-if="item.level == 2" class="imgps" />
                        </span>
                        <span>，</span>
                        <span style="color: #60b5ff">当期</span>
                        <span>({{ item.newstartTime }}~{{ item.newendTime }})发生</span>
                        <span style="color: #60b5ff">{{ item.dqNum }}</span>
                        <span>起，</span>
                        <span>去年</span>
                        <span style="color: #60b5ff">同期</span>
                        <span>发生</span>
                        <span style="color: #60b5ff">{{ item.tqNum }}</span>
                        <span>起</span>
                      </span>
                      <span v-if="item.type == 'H'">
                        类型警情
                        <span style="color: #60b5ff">{{ setPeriod(item.period) }}环比</span>
                        <span
                          :class="
                            item.level == '1'
                              ? 'yjhong'
                              : item.level == '2'
                              ? 'yjcheng'
                              : item.level == '3'
                              ? 'yjhuang'
                              : 'yjlan'
                          "
                        >
                          {{ item.percent }}%
                          <img src="@/assets/ht.png" alt="" v-if="item.level == 1" class="imgps" />
                          <img src="@/assets/lt.png" alt="" v-if="item.level == 4" class="imgps" />
                          <img
                            src="@/assets/huangt.png"
                            alt=""
                            v-if="item.level == 3"
                            class="imgps"
                          />
                          <img src="@/assets/ct.png" alt="" v-if="item.level == 2" class="imgps" />
                        </span>
                        <span>，</span>
                        <span style="color: #60b5ff">当期</span>
                        <span>({{ item.newstartTime }}~{{ item.newendTime }})发生</span>
                        <span style="color: #60b5ff">{{ item.dqNum }}</span>

                        <span>起，环比</span>
                        <span style="color: #60b5ff">上期</span>
                        <span>发生</span>
                        <span style="color: #60b5ff">{{ item.tqNum }}</span>
                        <span>起</span>
                      </span>
                      <span v-if="item.type == 'N'">
                        类型警情
                        <span style="color: #60b5ff">{{ setPeriod(item.period) }}</span>
                        <span style="color: #60b5ff">当期</span>
                        ({{ item.newstartTime }}~{{ item.newendTime }})发生
                        <span
                          :class="
                            item.level == '1'
                              ? 'yjhong'
                              : item.level == '2'
                              ? 'yjcheng'
                              : item.level == '3'
                              ? 'yjhuang'
                              : 'yjlan'
                          "
                        >
                          {{ item.dqNum }}
                          <img src="@/assets/ht.png" alt="" v-if="item.level == 1" class="imgps" />
                          <img src="@/assets/lt.png" alt="" v-if="item.level == 4" class="imgps" />
                          <img
                            src="@/assets/huangt.png"
                            alt=""
                            v-if="item.level == 3"
                            class="imgps"
                          />
                          <img src="@/assets/ct.png" alt="" v-if="item.level == 2" class="imgps" />
                        </span>
                        起
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </a-card>
          </a-col>
          <a-col :span="7" style="position: relative">
            <!-- <gauge :height="300" :option="detailData.yjLevel" /> -->
            <div style="margin-top: 48px">
              <img
                src="@/assets/hongseyujing.svg"
                alt=""
                class="semicircle"
                v-if="tabsItem.level == 1"
              />
              <img
                src="@/assets/huangseyujing.svg"
                alt=""
                class="semicircle"
                v-if="tabsItem.level == 3"
              />
              <img
                src="@/assets/lanseyujing.svg"
                alt=""
                class="semicircle"
                v-if="tabsItem.level == 4"
              />
              <img
                src="@/assets/chengseyujing.svg"
                alt=""
                class="semicircle"
                v-if="tabsItem.level == 2"
              />
              <div class="pietitle">
                <img src="@/assets/hong.png" alt="" v-if="tabsItem.level == 1" />
                <img src="@/assets/huang.png" alt="" v-if="tabsItem.level == 3" />
                <img src="@/assets/lan.png" alt="" v-if="tabsItem.level == 4" />
                <img src="@/assets/cheng.png" alt="" v-if="tabsItem.level == 2" />
                <div
                  :style="{
                    color: `${
                      tabsItem.level == 1
                        ? '#FF2F54'
                        : tabsItem.level == 2
                        ? '#FF7A1E'
                        : tabsItem.level == 3
                        ? '#FFEB0E'
                        : '#1EEFFF'
                    }`,
                  }"
                >
                  {{ setimaIndex(tabsItem.level) }}
                </div>
              </div>
            </div>
          </a-col>
        </a-row>
      </a-card>
      <a-card class="radios" style="height: 49px">
        <a-radio-group
          v-model:value="value"
          button-style="solid"
          style="position: absolute; top: -1px"
          @change="tasChange"
        >
          <a-radio-button
            :value="item.ruleId"
            style="height: 49px; line-height: 49px; border: none"
            v-for="(item, index) in detailData.rule"
            :key="item.ruleId"
          >
            预警规则{{ index + 1 }}
          </a-radio-button>
          <a-radio-button v-show="false"></a-radio-button>
        </a-radio-group>
      </a-card>
      <div style="margin-top: 22px; display: flex; align-items: center">
        <!-- <a-radio-group v-model:value="value" button-style="solid">
          <a-radio-button value="a" style="margin-right: 10px">推送至首长研判台</a-radio-button>
          <a-radio-button value="b" style="margin-right: 10px">通知下发</a-radio-button>
          <a-radio-button value="c" style="margin-right: 10px">整改监测</a-radio-button>
          <a-radio-button value="d" style="margin-right: 10px">警种协同</a-radio-button>
          <a-radio-button value="d" style="margin-right: 10px">生成报告</a-radio-button>
        </a-radio-group> -->
        <a-button @click="saveImgClick()" style="margin-right: 10px">生成报告</a-button>
        <a-button @click="handleIssue" style="margin-right: 10px">
          <router-link
            tag="a"
            target="_blank"
            :to="{
              path: '/single-initiator/add',
              query: {
                title: issueParams.title,
                basicContent: issueParams.basicContent,
                newType: issueParams.newType,
                oldType: issueParams.oldType,
              },
            }"
          >
            下发到流转单
          </router-link>
        </a-button>
        <div style="display: flex" ref="basicContentRef">
          <div id="ruleValue">
            <span
              :title="tabsItem.xqdwCode[0]"
              style="margin: 0 6px 0 0"
              v-if="tabsItem.xqdwCode && tabsItem.xqdwCode[0] != ''"
            >
              <span v-for="(o, ind) in tabsItem.xqdwCode" :key="ind" style="margin-right: 4px">
                {{ o }}
              </span>
            </span>
            <span v-else style="margin-right: 6px">全部辖区</span>

            <span
              style="margin: 0 6px 0 0"
              v-if="tabsItem.classifyCode && tabsItem.classifyCode[0] != ''"
            >
              <m-tag
                :type="
                  detailData.classifyType == '1'
                    ? 'ai'
                    : detailData.classifyType == '2'
                    ? 'jq'
                    : 'fk'
                "
                v-for="(o, i) in tabsItem.classifyCode"
                :key="i"
              >
                {{ o }}
              </m-tag>
            </span>

            <span
              :title="tabsItem.callSummaryCode"
              style="margin: 0 6px 0 0"
              v-if="tabsItem.callSummaryCode && tabsItem.callSummaryCode[0] != ''"
            >
              <m-tag
                :type="
                  detailData.classifyType == '1'
                    ? 'ai'
                    : detailData.classifyType == '2'
                    ? 'jq'
                    : 'fk'
                "
                v-for="(o, i) in tabsItem.callSummaryCode"
                :key="i"
              >
                {{ o }}
              </m-tag>
            </span>

            <span
              :title="tabsItem.dealSummaryCode"
              style="margin: 0 6px 0 0"
              v-if="tabsItem.dealSummaryCode && tabsItem.dealSummaryCode[0] != ''"
            >
              <m-tag
                :type="
                  detailData.classifyType == '1'
                    ? 'ai'
                    : detailData.classifyType == '2'
                    ? 'jq'
                    : 'fk'
                "
                v-for="(o, i) in tabsItem.dealSummaryCode"
                :key="i"
              >
                {{ o }}
              </m-tag>
            </span>
            <span v-if="tabsItem.type == 'T'">
              类型警情
              <span style="color: #60b5ff">{{ setPeriod(tabsItem.period) }}同比</span>
              <span
                :class="
                  tabsItem.level == '1'
                    ? 'yjhong'
                    : tabsItem.level == '2'
                    ? 'yjcheng'
                    : tabsItem.level == '3'
                    ? 'yjhuang'
                    : 'yjlan'
                "
              >
                {{ `${tabsItem.percent}%` }}
                <img src="@/assets/ht.png" alt="" v-if="tabsItem.level == 1" class="imgps" />
                <img src="@/assets/lt.png" alt="" v-if="tabsItem.level == 4" class="imgps" />
                <img src="@/assets/huangt.png" alt="" v-if="tabsItem.level == 3" class="imgps" />
                <img src="@/assets/ct.png" alt="" v-if="tabsItem.level == 2" class="imgps" />
              </span>
              <span>，</span>
              <span style="color: #60b5ff">当期</span>

              <span>({{ tabsItem.newstartTime }}~{{ tabsItem.newendTime }})发生</span>
              <span style="color: #60b5ff">{{ tabsItem.dqNum }}</span>
              <span>起，去年</span>
              <span style="color: #60b5ff">同期</span>
              <span>发生</span>
              <span style="color: #60b5ff">
                {{ tabsItem.tqNum }}
              </span>
              <span>起</span>
            </span>
            <span v-if="tabsItem.type == 'H'">
              类型警情
              <span style="color: #60b5ff">{{ setPeriod(tabsItem.period) }}环比</span>
              <span
                :class="
                  tabsItem.level == '1'
                    ? 'yjhong'
                    : tabsItem.level == '2'
                    ? 'yjcheng'
                    : tabsItem.level == '3'
                    ? 'yjhuang'
                    : 'yjlan'
                "
              >
                {{ tabsItem.percent }}%
                <img src="@/assets/ht.png" alt="" v-if="tabsItem.level == 1" class="imgps" />
                <img src="@/assets/lt.png" alt="" v-if="tabsItem.level == 4" class="imgps" />
                <img src="@/assets/huangt.png" alt="" v-if="tabsItem.level == 3" class="imgps" />
                <img src="@/assets/ct.png" alt="" v-if="tabsItem.level == 2" class="imgps" />
              </span>
              <span>
                ，
                <span style="color: #60b5ff">当期</span>
                <span>({{ tabsItem.newstartTime }}~{{ tabsItem.newendTime }})发生</span>
              </span>
              <span style="color: #60b5ff">{{ tabsItem.dqNum }}</span>
              <span>起，环比</span>
              <span style="color: #60b5ff">上期</span>
              <span>发生</span>
              <span style="color: #60b5ff">
                {{ tabsItem.tqNum }}
              </span>
              <span>起</span>
            </span>
            <span v-if="tabsItem.type == 'N'">
              类型警情
              <span style="color: #60b5ff">{{ setPeriod(tabsItem.period) }}当期</span>
              ({{ tabsItem.newstartTime }}~{{ tabsItem.newendTime }})发生
              <span
                :class="
                  tabsItem.level == '1'
                    ? 'yjhong'
                    : tabsItem.level == '2'
                    ? 'yjcheng'
                    : tabsItem.level == '3'
                    ? 'yjhuang'
                    : 'yjlan'
                "
              >
                {{ tabsItem.dqNum }}
                <img src="@/assets/ht.png" alt="" v-if="tabsItem.level == 1" class="imgps" />
                <img src="@/assets/lt.png" alt="" v-if="tabsItem.level == 4" class="imgps" />
                <img src="@/assets/huangt.png" alt="" v-if="tabsItem.level == 3" class="imgps" />
                <img src="@/assets/ct.png" alt="" v-if="tabsItem.level == 2" class="imgps" />
              </span>
              起
            </span>
          </div>
        </div>
      </div>
      <a-row :gutter="20">
        <a-col :span="16" class="echats">
          <div class="canvas_box" id="mycanvas0">
            <a-card style="margin-top: 22px; height: 495px" size="small">
              <template #title>
                <span class="canvasName" style="margin-left: 20px">预警趋势分析</span>
                <span
                  class="iconfont iconPosition"
                  :class="
                    detailData.classifyType == 1
                      ? 'icon-AIjiaobiao'
                      : detailData.classifyType == 2
                      ? 'icon-jiejingjiaobiao'
                      : 'icon-fankuijiaobiao'
                  "
                ></span>
              </template>
              <twoLine
                :height="425"
                :type="classifyType"
                :data="trendData"
                :period="period"
                :time="time"
                :ratio="ratio"
                :yjLevel="detailData.yjLevel"
                v-if="trendData && trendData.mapList && trendData.tqMapList.length"
                @zrender:click="handletwoLine"
              />
              <a-empty style="margin-top: calc(50% - 345px)" v-else />
            </a-card>
          </div>
        </a-col>
        <a-col :span="8" class="echats">
          <a-card style="margin-top: 22px; height: 495px" size="small">
            <template #title>
              <span class="canvasName" style="margin-left: 20px">
                {{
                  tabsItem.type == 'H'
                    ? '下级标签环比分布详情'
                    : tabsItem.type == 'T'
                    ? '下级标签同比分布详情'
                    : '下级标签警情数'
                }}
              </span>
              <span
                class="iconfont iconPosition"
                :class="
                  detailData.classifyType == 1
                    ? 'icon-AIjiaobiao'
                    : detailData.classifyType == 2
                    ? 'icon-jiejingjiaobiao'
                    : 'icon-fankuijiaobiao'
                "
              ></span>
            </template>
            <a-row
              style="
                display: flex;
                justify-content: space-around;
                background: #1e2027;
                padding: 5px;
                text-align: center;
              "
            >
              <a-col class="subscript" :span="9" style="text-align: left; padding-left: 60px">
                名称
              </a-col>
              <a-col class="subscript" :span="5">当期</a-col>
              <a-col class="subscript" :span="5">
                {{ tabsItem.type == 'H' ? '上期' : tabsItem.type == 'T' ? '同期' : '' }}
              </a-col>
              <a-col class="subscript" :span="5">
                {{ tabsItem.type == 'H' ? '环比' : tabsItem.type == 'T' ? '同比' : '' }}
              </a-col>
            </a-row>

            <div style="height: 400px; overflow: auto">
              <a-col
                :span="24"
                style="
                  display: flex;
                  padding: 5px;
                  height: 40px;
                  text-align: center;
                  border-bottom: 1px solid #65676b;
                "
                v-for="(item, index) in labData"
                :key="index"
              >
                <a-col :span="9" style="display: flex; font-size: 14px">
                  <span
                    style="
                      margin-right: 10px;
                      width: 20px;
                      height: 20px;
                      border-radius: 50%;
                      display: inlineblock;
                      text-align: center;
                      line-height: 20px;
                      font-size: 12px;
                      background: #1540a1;
                      color: #ffffff;
                    "
                  >
                    {{ index + 1 }}
                  </span>
                  <span
                    style="
                      text-align: left;
                      flex: 1;
                      min-width: 0;
                      white-space: nowrap;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      font-weight: normal;
                      color: #6c99ff;
                    "
                  >
                    <!-- {{ item.classifyName }} -->
                    <a-tooltip>
                      <template #title>
                        {{ item.classifyName }}
                      </template>
                      {{ item.classifyName }}
                    </a-tooltip>
                  </span>
                </a-col>
                <a-col :span="5" style="text-decoration: underline">
                  <a
                    href="javascript:;"
                    style="color: rgba(255, 255, 255, 0.65)"
                    @click="handleperiod(item, 1)"
                  >
                    {{ item.dqNum }}
                  </a>
                </a-col>
                <a-col :span="5">
                  <span v-if="tabsItem.type == 'N' ? true : false"></span>
                  <a
                    href="javascript:;"
                    style="color: rgba(255, 255, 255, 0.65); text-decoration: underline"
                    @click="handleperiod(item, 2)"
                    v-else
                  >
                    {{ item.num }}
                  </a>
                </a-col>
                <a-col :span="5" v-if="tabsItem.type == 'N' ? true : false"></a-col>
                <a-col :span="5" v-else>
                  <div class="ratio">
                    <a-tooltip>
                      <template #title>
                        {{ item.percent == '' ? '-' : `${item.percent}%` }}
                      </template>
                      {{ item.percent == '' ? '-' : `${item.percent}%` }}
                    </a-tooltip>
                  </div>
                  <img
                    src="@/assets/ht.png"
                    style="width: 10px; height: 16px; position: absolute; right: 0; top: 5px"
                    alt=""
                    v-if="item.percent > 0 || (item.percent == '' && item.num == 0)"
                  />
                  <img
                    src="@/assets/xt.png"
                    style="width: 10px; height:16px;position: absolute; 12px; right: 0; top: 5px"
                    alt=""
                    v-if="item.percent < 0"
                  />
                  <!-- <span v-if="item.percent == ''" style="color: #707070; font-size: 16px">-</span> -->
                </a-col>
              </a-col>
            </div>
          </a-card>
        </a-col>
      </a-row>
      <div class="echats" style="margin-top: 22px">
        <div class="canvas_box" id="mycanvas2">
          <a-card style="height: 270px" size="small">
            <template #title>
              <span class="canvasName" style="margin-left: 20px">预警辖区单位分布</span>
              <span
                class="iconfont iconPosition"
                :class="
                  detailData.classifyType == 1
                    ? 'icon-AIjiaobiao'
                    : detailData.classifyType == 2
                    ? 'icon-jiejingjiaobiao'
                    : 'icon-fankuijiaobiao'
                "
              ></span>
            </template>
            <mixBar
              v-if="companyList.length"
              :height="200"
              :data="companyList"
              :type="classifyType"
              :legend="legend"
              :fieldNames="{ name: 'xqdwName', values: ['dqNum', 'num'] }"
              @zrender:click="companyClick"
            />
            <a-empty style="margin-top: 50px" v-else />
          </a-card>
        </div>
      </div>
      <a-row :gutter="10" class="echats" style="margin-top: 22px">
        <a-col :span="8">
          <div class="canvas_box" id="mycanvas3">
            <a-card style="height: 370px" size="small">
              <template #title>
                <span class="canvasName" style="margin-left: 20px">
                  【{{ detailData.modelName }}】热词智能提取
                </span>
                <span
                  class="iconfont icon-AIjiaobiao"
                  style="
                    font-size: 40px;
                    color: #e99220;
                    position: absolute;
                    top: 7px;
                    left: -2px;
                    z-index: 9;
                  "
                ></span>
              </template>
              <tagcloud
                v-if="hotWordList.length"
                :tags="hotWordList"
                :height="300"
                @clickEchart="clickEchart"
              />
              <a-empty style="margin-top: 100px" v-else />
            </a-card>
          </div>
        </a-col>
        <a-col :span="16">
          <div class="canvas_box" id="mycanvas4">
            <a-card style="height: 370px" size="small">
              <template #title>
                <span class="canvasName" style="margin-left: 26px">预警手机号涉警量统计</span>
                <span
                  class="iconfont icon-AIjiaobiao"
                  style="
                    font-size: 40px;
                    color: #e99220;
                    position: absolute;
                    top: 7px;
                    left: -2px;
                    z-index: 9;
                  "
                ></span>
              </template>
              <barDataColor
                v-if="statList.length"
                :data="statList"
                :fieldNames="{
                  name: 'callPhone',
                  value: 'num',
                }"
                :height="300"
                @zrender:click="statClick"
              />
              <a-empty style="margin-top: 100px" v-else />
            </a-card>
          </div>
        </a-col>
      </a-row>
      <a-row :gutter="10" class="echats" style="margin-top: 22px">
        <a-col v-if="detailData.classifyType === '1'" :span="8">
          <div class="canvas_box" id="mycanvas5">
            <a-card style="height: 450px" size="small" class="echatsAI">
              <template #title>
                <span class="iconfont icon-AI"></span>
                <span class="canvasName" style="margin-left: 50px">
                  【{{ detailData.modelName }}】
                </span>
              </template>
              <pie
                v-if="classifyList.length"
                :data="classifyList"
                :height="400"
                :fieldNames="{
                  name: 'classifyName',
                  value: 'caseNum',
                }"
                :defalutOptions="classifyOptions"
                title="警情数量"
                @zrender:click="classifyClick"
              >
                <template v-slot:titles></template>
              </pie>
              <a-empty style="margin-top: 100px" v-else />
            </a-card>
          </div>
        </a-col>
        <a-col :span="detailData.classifyType === '1' ? 8 : 12">
          <div class="canvas_box" id="mycanvas6">
            <a-card style="height: 450px" size="small" class="echatsJie">
              <template #title>
                <span class="iconfont icon-jiejing"></span>
                <span class="canvasName" style="margin-left: 50px">接警所覆盖类别</span>
              </template>
              <pie
                v-if="callList.length"
                :data="callList"
                :height="400"
                :fieldNames="{
                  name: 'callSummaryName',
                  value: 'caseNum',
                }"
                :defalutOptions="callOptions"
                @zrender:click="callClick"
              >
                <template v-slot:title>
                  <span class="callSize">接</span>
                </template>
              </pie>
              <a-empty style="margin-top: 100px" v-else />
            </a-card>
          </div>
        </a-col>
        <a-col :span="detailData.classifyType === '1' ? 8 : 12">
          <div class="canvas_box" id="mycanvas7">
            <a-card style="height: 450px" size="small" class="echatsFan">
              <template #title>
                <span class="iconfont icon-fankui1"></span>
                <span class="canvasName" style="margin-left: 50px">反馈所覆盖类别</span>
              </template>
              <pie
                v-if="dealList.length"
                :data="dealList"
                :height="400"
                :fieldNames="{
                  name: 'dealSummaryName',
                  value: 'caseNum',
                }"
                :defalutOptions="dealOptions"
                @zrender:click="dealClick"
              >
                <template v-slot:title>
                  <span class="dealSize">反</span>
                </template>
              </pie>
              <a-empty style="margin-top: 100px" v-else />
            </a-card>
          </div>
        </a-col>
      </a-row>
      <a-row class="echats" style="margin-top: 20px" :gutter="10">
        <a-col :span="12">
          <div class="canvas_box" id="mycanvas8">
            <a-card size="small" style="height: 300px">
              <template #title>
                <span class="canvasName" style="margin-left: 20px">
                  【{{ detailData.modelName }}】年龄智能分析
                </span>
              </template>
              <span
                class="iconfont icon-AIjiaobiao"
                style="
                  font-size: 40px;
                  color: #e99220;
                  position: absolute;
                  top: -14px;
                  left: -2px;
                  z-index: 9;
                "
              ></span>
              <transverseBar
                :height="230"
                :data="ageData"
                v-if="ageData.length"
                @zrender:click="renderClickHandle"
              />
              <a-empty style="margin-top: 27px" v-else />
            </a-card>
          </div>
          <div class="canvas_box" id="mycanvas9">
            <a-card size="small" style="height: 220px; margin-top: 10px">
              <template #title>
                <span class="canvasName" style="margin-left: 20px">
                  【{{ detailData.modelName }}】性别智能分析
                </span>
              </template>
              <span
                class="iconfont icon-AIjiaobiao"
                style="
                  font-size: 40px;
                  color: #e99220;
                  position: absolute;
                  top: -14px;
                  left: -2px;
                  z-index: 9;
                "
              ></span>
              <transverseBar
                :height="150"
                :data="sexData"
                v-if="sexData.length"
                @zrender:click="renderClickHandleSex"
              />
              <a-empty style="margin-top: 27px" v-else />
            </a-card>
          </div>
        </a-col>
        <a-col :span="12">
          <div class="canvas_box" id="mycanvas10">
            <a-card style="height: 530px" size="small">
              <template #title>
                <span style="margin-left: 20px" class="canvasName">预警高发时段分析</span>
              </template>
              <span
                class="iconfont icon-AIjiaobiao"
                style="
                  font-size: 40px;
                  color: #e99220;
                  position: absolute;
                  top: -14px;
                  left: -2px;
                  z-index: 9;
                "
              ></span>
              <template #extra>
                <a-select v-model:value="groupField" style="width: 120px" @change="timeStat">
                  <a-select-option value="hour">小时</a-select-option>
                  <a-select-option value="day">天</a-select-option>
                  <a-select-option value="week">周</a-select-option>
                  <a-select-option value="month">月</a-select-option>
                  <a-select-option value="year">年</a-select-option>
                  <a-select-option value="dayRange">时间段</a-select-option>
                </a-select>
              </template>
              <bar
                v-if="timeList.length"
                :data="timeList"
                :height="450"
                :fieldNames="{
                  name: 'name',
                  value: 'value',
                }"
                :defalutOptions="timeOptions"
                @zrender:click="timeClick"
              />
              <a-empty style="margin-top: 100px" v-else />
            </a-card>
          </div>
        </a-col>
      </a-row>
      <!-- 警情列表 -->
      <police-list-drawer
        :title="detailData.modelName + ' ' + policeName + ' '"
        v-model:visible="visible"
        :tabs="policeTabs"
      ></police-list-drawer>
      <list
        v-model:visible="livisible"
        :title="listTile"
        :portionUrl="portionUrl"
        :params="params"
        :topicType="topicType"
      />
    </a-spin>
  </page-container>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, reactive, createVNode, computed } from 'vue';
// import gauge from '@/components/charts/gauge/index.vue';
import twoLine from '@/components/charts/twoLine/index.vue';
import transverseBar from '@/components/charts/transverseBar/index.vue';
import tagcloud from '@/components/charts/tag-cloud/index.vue';
import mixBar from '@/components/charts/mix-bar/index.vue';
import barDataColor from '@/components/charts/bar-data-color/index.vue';
import Pie from '../four-color-warning/components/early-warning-pie.vue';
import bar from './components/bar.vue';
import { useRouter } from 'vue-router';
import MTag from '@/components/m-tag/index.vue';
import list from '@/components/police-list-drawer/index.vue';
import {
  getQueryYjResultList,
  getQueryHotWord,
  getTimeStat,
  getQueryYjXqdwStat,
  queryYjClassStat,
  queryYjCaseInfoStat,
  getQueryYjPhoneStat,
  getQueryThemeBarStat,
} from '@/api/magic-cube/four-color-detail';
import moment from 'moment';
import { groupStat } from '@/api/intelligentanalysis/echarts';
import PoliceListDrawer from '@/components/police-list-drawer/index.vue';
import { classifyOptions, callOptions, dealOptions, timeOptions } from '../js/pieStyle';
import { Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import html2canvas from 'html2canvas';
import JSZipUtils from 'jszip-utils';
import docxtemplater from 'docxtemplater';
import { saveAs } from 'file-saver';
import PizZip from 'pizzip';
import ImageModule from 'docxtemplater-image-module-free';
import { cloneDeep } from 'lodash';
interface Issueparams {
  title: string;
  basicContent: string;
  newType: string;
  oldType: string;
}
export default defineComponent({
  components: {
    // gauge,
    twoLine,
    transverseBar,
    tagcloud,
    mixBar,
    barDataColor,
    Pie,
    bar,
    PoliceListDrawer,
    MTag,
    list,
  },
  setup() {
    const topicType = ref<string>('ai');
    const classifyType = ref<any>('0');
    const router = useRouter();
    const ruleId = ref<any>(router.currentRoute.value.query.ruleId);
    const classifyList = ref<any>([]); //智能分析Pie数据
    const callList = ref<any>([]); //接警Pie数据
    const dealList = ref<any>([]); //反馈Pie数据
    const className = ref<string>('');
    const detailData = ref<any>({});
    const visible = ref<boolean>(false);
    const policeTabs = ref<Array<any>>([]);
    //预警规则
    const xqdwCode = ref<string>('');
    const time = ref<string>('');
    const ratio = ref<string>('');
    const queryYjResultList = async () => {
      try {
        const res = await getQueryYjResultList({ ids: ruleId.value });
        if (res.code === 200) {
          xqdwCode.value = res.data.details[0].xqdwCode;
          detailData.value = res.data.details[0];
          if (detailData.value?.rule?.length) {
            detailData.value.rule.forEach(item => {
              item.newstartTime = (item?.startTime || '').split(' ')[0];
              item.newendTime = (item?.endTime || '').split(' ')[0];
            });
          }
          //默认选中第一条
          tabsItem.value = detailData.value.rule[0];
          ratio.value = detailData.value.rule[0].type;
          time.value = tabsItem.value.newendTime;
          period.value = setPeriod(tabsItem.value.period);
          value.value = tabsItem.value.ruleId;
          classifyType.value = detailData.value.classifyType;
          topicType.value = detailData.value.classifyType == 1 ? 'ai' : 'ct';
          issueQuery(tabsItem.value);
          handleHttp();
        }
      } catch (err) {
        console.log('err', err);
      }
    };

    //Deng
    const basicContentRef = ref();
    const value = ref<string>('');
    const ruleIndex = ref<number>(0);
    const spinning = ref<boolean>(true);
    //tabs点击获取的数据集合
    const tabsItem = ref<any>({});
    //Tabs点击事件
    const period = ref<string>('');
    const tasChange = value => {
      spinning.value = true;
      detailData.value.rule.forEach((item, index) => {
        if (item.ruleId == value.target.value) {
          tabsItem.value = item;
          time.value = tabsItem.value.newendTime;
          ratio.value = tabsItem.value.type;
          period.value = setPeriod(item.period);
          ruleIndex.value = index;
          handleHttp();
        }
      });
    };
    const ageData = ref<any>([]);
    const sexData = ref<any>([]);
    //年龄 性别 智能分析
    const handlegroupStat = () => {
      let obj = {
        callTimeStart: tabsItem.value.startTime,
        callTimeEnd: tabsItem.value.endTime,
        classifyType: tabsItem.value.classifyType,
        classifyCodes: classifyType.value == '1' ? detailData.value.classifyCode : '',
        callSummaryCodes: classifyType.value == '2' ? detailData.value.classifyCode : '',
        dealSummaryCodes: classifyType.value == '3' ? detailData.value.classifyCode : '',
        groupField: 'ageGroup',
        xqdwCode: xqdwCode.value,
      };
      let objEl = {
        callTimeStart: tabsItem.value.startTime,
        callTimeEnd: tabsItem.value.endTime,
        classifyType: tabsItem.value.classifyType,
        classifyCodes: classifyType.value == '1' ? detailData.value.classifyCode : '',
        callSummaryCodes: classifyType.value == '2' ? detailData.value.classifyCode : '',
        dealSummaryCodes: classifyType.value == '3' ? detailData.value.classifyCode : '',
        groupField: 'sex',
        xqdwCode: xqdwCode.value,
      };
      groupStat(obj).then(res => {
        ageData.value = res.data;
      });
      groupStat(objEl).then(res => {
        sexData.value = res.data;
      });
    };
    //  方法 - 周期类型数据转换
    const setPeriod = (period: string): string => {
      let s = '';
      switch (period) {
        case 'D':
          s = '日';
          break;
        case 'W':
          s = '周';
          break;
        case 'M':
          s = '月';
          break;
      }
      return s;
    };
    const setimaIndex = (imaIndex: string): string => {
      let s = '';
      switch (imaIndex) {
        case '1':
          s = '红色预警';
          break;
        case '2':
          s = '橙色预警';
          break;
        case '3':
          s = '黄色预警';
          break;
        case '4':
          s = '蓝色预警';
          break;
      }
      return s;
    };
    //下级标签同比分布详情
    const labData = ref<any>([]);
    const handlequeryYjClassStat = () => {
      let obj = {
        startTime: tabsItem.value.startTime,
        endTime: tabsItem.value.endTime,
        tqStartTime: tabsItem.value.tqStartTime,
        tqEndTime: tabsItem.value.tqEndTime,
        sqEndTime: tabsItem.value.sqEndTime,
        sqStartTime: tabsItem.value.sqStartTime,
        type: tabsItem.value.type,
        code: detailData.value.classifyCode,
        classifyType: detailData.value.classifyType,
        xqdwCode: xqdwCode.value,
      };
      queryYjClassStat(obj).then(res => {
        labData.value = res.data;
      });
    };
    const livisible = ref<any>(false);
    const listTile = ref<any>('');
    const portionUrl = ref<any>('/aitype/persona/queryPersonCaseList');
    const params = ref<any>({});
    //年龄点击事件
    const renderClickHandle = value => {
      let obj = {
        classifyCodes: classifyType.value == '1' ? detailData.value.classifyCode : '',
        callSummaryCodes: classifyType.value == '2' ? detailData.value.classifyCode : '',
        dealSummaryCodes: classifyType.value == '3' ? detailData.value.classifyCode : '',
        age: value.name,
        callTimeStart: tabsItem.value.startTime,
        callTimeEnd: tabsItem.value.endTime,
        page: 1,
        size: 10,
      };
      params.value = obj;
      listTile.value = `${detailData.value.modelName}-${value.name}`;
      portionUrl.value = '/aitype/persona/queryPersonCaseList';
      livisible.value = true;
    };
    //性别点击事件
    const renderClickHandleSex = value => {
      let obj = {
        classifyCodes: classifyType.value == '1' ? detailData.value.classifyCode : '',
        callSummaryCodes: classifyType.value == '2' ? detailData.value.classifyCode : '',
        dealSummaryCodes: classifyType.value == '3' ? detailData.value.classifyCode : '',
        sex: value.name,
        callTimeStart: tabsItem.value.startTime,
        callTimeEnd: tabsItem.value.endTime,
        page: 1,
        size: 10,
      };
      params.value = obj;
      listTile.value = `${detailData.value.modelName}-${value.name}`;
      portionUrl.value = '/aitype/persona/queryPersonCaseList';
      livisible.value = true;
    };
    //预警趋势分析
    const trendData = ref<any>({});
    const handlequeryYjCaseInfoStat = () => {
      let obj = {
        startTime: tabsItem.value.startTime,
        endTime: tabsItem.value.endTime,
        tqStartTime: tabsItem.value.tqStartTime,
        tqEndTime: tabsItem.value.tqEndTime,
        sqEndTime: tabsItem.value.sqEndTime,
        sqStartTime: tabsItem.value.sqStartTime,
        type: tabsItem.value.type,
        code: detailData.value.classifyCode,
        classifyType: detailData.value.classifyType,
        period: tabsItem.value.period,
        xqdwCodes: xqdwCode.value,
      };
      queryYjCaseInfoStat(obj).then(res => {
        trendData.value = res.data;
      });
    };
    //当期点击事件
    const handleperiod = (item, value) => {
      // detailData.value.classifyCode
      let obj = {
        classifyCodes: classifyType.value == '1' ? item.classifyCode : '',
        callSummaryCodes: classifyType.value == '2' ? item.classifyCode : '',
        dealSummaryCodes: classifyType.value == '3' ? item.classifyCode : '',
        callTimeStart: tabsItem.value.startTime,
        callTimeEnd: tabsItem.value.endTime,
        xqdwCodes: xqdwCode.value,
        page: 1,
        size: 10,
      };
      let obj2 = {
        classifyCodes: classifyType.value == '1' ? item.classifyCode : '',
        callSummaryCodes: classifyType.value == '2' ? item.classifyCode : '',
        dealSummaryCodes: classifyType.value == '3' ? item.classifyCode : '',
        xqdwCodes: xqdwCode.value,
        callTimeStart:
          tabsItem.value.type == 'H' ? tabsItem.value.sqStartTime : tabsItem.value.tqStartTime,
        callTimeEnd:
          tabsItem.value.type == 'H' ? tabsItem.value.sqEndTime : tabsItem.value.tqEndTime,
        page: 1,
        size: 10,
      };
      if (value == 1) {
        params.value = obj;
      } else {
        params.value = obj2;
      }
      listTile.value = `${detailData.value.modelName}-${item.classifyName}`;
      portionUrl.value = '/aitype/caseInfo/queryCaseInfo';
      livisible.value = true;
    };
    //趋近分析
    const handletwoLine = value => {
      let date = '';
      let newdate = '';
      if (tabsItem.value.period == 'W') {
        date = moment(trendData.value.mapList[value].dDate)
          .subtract(6, 'days')
          .format('YYYY-MM-DD');
        newdate = moment(trendData.value.tqMapList[value].dDate)
          .subtract(6, 'days')
          .format('YYYY-MM-DD');
      } else if (tabsItem.value.period == 'M') {
        date = trendData.value.mapList[value].startDate;
        newdate = trendData.value.tqMapList[value].startDate;
      } else {
        date = `${trendData.value.mapList[value].dDate}`;
        newdate = `${trendData.value.tqMapList[value].dDate}`;
      }
      const Params = [
        {
          name: legend.value[0],
          url: '/aitype/caseInfo/queryCaseInfo',
          params: reactive({
            callTimeStart: `${date} 00:00:00`,
            callTimeEnd: `${
              tabsItem.value.period == 'M'
                ? trendData.value.mapList[value].endDate
                : trendData.value.mapList[value].dDate
            } 23:59:59`,
            classifyCodes: classifyType.value == '1' ? detailData.value.classifyCode : '',
            callSummaryCodes: classifyType.value == '2' ? detailData.value.classifyCode : '',
            dealSummaryCodes: classifyType.value == '3' ? detailData.value.classifyCode : '',
            xqdwCodes: xqdwCode.value,
            page: 1,
            size: 50,
          }),
          type: detailData.value.classifyType == 1 ? 'ai' : 'ct',
        },
        {
          name: '同期警情数',
          url: '/aitype/caseInfo/queryCaseInfo',
          params: reactive({
            callTimeStart: `${newdate} 00:00:00`,
            callTimeEnd: `${
              tabsItem.value.period == 'M'
                ? trendData.value.tqMapList[value].endDate
                : trendData.value.tqMapList[value].dDate
            } 23:59:59`,
            classifyCodes: classifyType.value == '1' ? detailData.value.classifyCode : '',
            callSummaryCodes: classifyType.value == '2' ? detailData.value.classifyCode : '',
            dealSummaryCodes: classifyType.value == '3' ? detailData.value.classifyCode : '',
            xqdwCodes: xqdwCode.value,
            page: 1,
            size: 50,
          }),
          type: detailData.value.classifyType == 1 ? 'ai' : 'ct',
        },
      ];
      const ParamsnoT = [
        {
          name: legend.value[0],
          url: '/aitype/caseInfo/queryCaseInfo',
          params: reactive({
            callTimeStart: `${date} 00:00:00`,
            callTimeEnd: `${
              tabsItem.value.period == 'M'
                ? trendData.value.mapList[value].endDate
                : trendData.value.mapList[value].dDate
            } 23:59:59`,
            classifyCodes: classifyType.value == '1' ? detailData.value.classifyCode : '',
            callSummaryCodes: classifyType.value == '2' ? detailData.value.classifyCode : '',
            dealSummaryCodes: classifyType.value == '3' ? detailData.value.classifyCode : '',
            xqdwCodes: xqdwCode.value,
            page: 1,
            size: 50,
          }),
          type: detailData.value.classifyType == 1 ? 'ai' : 'ct',
        },
      ];
      if (tabsItem.value.type == 'T') {
        policeTabs.value = Params;
      } else {
        policeTabs.value = ParamsnoT;
      }
      policeName.value = `${detailData.value.modelName}-预警趋势分析`;
      visible.value = true;
    };
    //页面接口集合
    const handleHttp = () => {
      //deng
      handlegroupStat();
      handlequeryYjClassStat();
      handlequeryYjCaseInfoStat();
      setTimeout(() => {
        spinning.value = false;
      }, 1000);
      //xie
      className.value = tabsItem.value.classifyCode[0];
      queryHotWord();
      timeStat();
      queryYjXqdwStat();
      queryYjPhoneStat();
      queryThemeBarStat();
    };
    const issueParams = ref<Issueparams | any>({
      title: '',
      basicContent: '',
      newType: '1',
      oldType: '12',
    });
    const issueQuery = value => {
      if (value.classifyCode[0] && value.classifyCode[0] != '') {
        issueParams.value.title = '预警' + value.classifyCode[0] + '警情统计';
      } else if (value.callSummaryCode[0] && value.callSummaryCode[0] != '') {
        issueParams.value.title = '预警' + value.callSummaryCode[0] + '警情统计';
      } else if (value.dealSummaryCode[0] && value.dealSummaryCode[0] != '') {
        issueParams.value.title = '预警' + value.dealSummaryCode[0] + '警情统计';
      }
    };
    const handleIssue = () => {
      issueParams.value.basicContent = basicContentRef.value.innerText;
      //   issueParams.value = JSON.stringify(issueParams.value);
    };
    //Xie
    const hotWordList = ref<any>([]);
    const timeList = ref<any>([]);
    const companyList = ref<any>([]);
    const statList = ref<any>([]);
    const groupField = ref<string>('dayRange');
    const policeName = ref<string>('');
    const legend = ref<string[]>(['当期警情数', '上期警情数']);

    //热词
    const queryHotWord = async () => {
      let ListParams = {
        startTime: tabsItem.value.startTime,
        endTime: tabsItem.value.endTime,
        code: detailData.value.classifyCode,
        classifyType: classifyType.value,
        xqdwCodes: xqdwCode.value,
      };
      const res = await getQueryHotWord(ListParams);
      if (res.code === 200) {
        hotWordList.value = res.data.map(item => {
          return {
            name: item.hotWord,
            value: item.heat,
            classifyCode: item.classifyCode,
          };
        });
      }
    };

    //预警高发时段分析
    const timeStat = async () => {
      let TimeParams = {
        callTimeStart: tabsItem.value.startTime,
        callTimeEnd: tabsItem.value.endTime,
        classifyCodes: classifyType.value == '1' ? detailData.value.classifyCode : '',
        callSummaryCodes: classifyType.value == '2' ? detailData.value.classifyCode : '',
        dealSummaryCodes: classifyType.value == '3' ? detailData.value.classifyCode : '',
        groupField: groupField.value,
        xqdwCodes: xqdwCode.value,
      };
      const res = await getTimeStat(TimeParams);
      if (res.code === 200) {
        timeList.value = res.data;
      }
    };

    //预警辖区单位分布
    const queryYjXqdwStat = async () => {
      let CompanyParams = {
        startTime: tabsItem.value.startTime,
        endTime: tabsItem.value.endTime,
        tqStartTime:
          tabsItem.value.type == 'T' || tabsItem.value.type == 'N'
            ? tabsItem.value.tqStartTime
            : '',
        tqEndTime:
          tabsItem.value.type == 'T' || tabsItem.value.type == 'N' ? tabsItem.value.tqEndTime : '',
        sqStartTime: tabsItem.value.type == 'H' ? tabsItem.value.sqStartTime : '',
        sqEndTime: tabsItem.value.type == 'H' ? tabsItem.value.sqEndTime : '',
        type: tabsItem.value.type,
        code: detailData.value.classifyCode,
        classifyType: classifyType.value,
        xqdwCodes: xqdwCode.value,
      };
      const res = await getQueryYjXqdwStat(CompanyParams);
      if (res.code === 200) {
        companyList.value = res.data;
      }
    };

    //预警手机号报警量统计
    const queryYjPhoneStat = async () => {
      let StatParams = {
        startTime: tabsItem.value.startTime,
        endTime: tabsItem.value.endTime,
        type: tabsItem.value.type,
        code: detailData.value.classifyCode,
        classifyType: classifyType.value,
        xqdwCodes: xqdwCode.value,
      };
      const res = await getQueryYjPhoneStat(StatParams);
      if (res.code === 200) {
        statList.value = res.data;
      }
    };

    //智能点击事件
    const classifyClick = e => {
      if (e.target) {
        const index = 1;
        const { dataIndex } = e.target;
        const code = classifyList.value[dataIndex].classifyCode;
        onClick(index, code);
      }
    };
    //接警点击事件
    const callClick = e => {
      if (e.target) {
        const index = 2;
        const { dataIndex } = e.target;
        const code = callList.value[dataIndex].callSummaryCode;
        onClick(index, code);
      }
    };
    //反馈点击事件
    const dealClick = e => {
      if (e.target) {
        const index = 3;
        const { dataIndex } = e.target;
        const code = dealList.value[dataIndex].dealSummaryCode;
        onClick(index, code);
      }
    };

    const onClick = (index, code) => {
      const PieParams = [
        {
          name: '',
          url: '/aitype/caseInfo/queryCaseInfo',
          params: reactive({
            callTimeStart: tabsItem.value.startTime,
            callTimeEnd: tabsItem.value.endTime,
            classifyCodes:
              classifyType.value != '1' ? '' : index == '1' ? code : detailData.value.classifyCode,
            callSummaryCodes:
              classifyType.value == '2' && index == '3' ? detailData.value.classifyCode : '',
            dealSummaryCodes:
              classifyType.value == '3' && index == '2' ? detailData.value.classifyCode : '',
            callSummaryCode: index == '2' ? code : '',
            dealSummaryCode: index == '3' ? code : '',
            page: 1,
            size: 50,
          }),
          type: detailData.value.classifyType == 1 ? 'ai' : 'ct',
        },
      ];
      policeTabs.value = PieParams;
      policeName.value = '';
      visible.value = true;
    };

    //热词点击事件
    const clickEchart = value => {
      const Params = [
        {
          name: '',
          url: '/aitype/caseInfo/queryCaseInfo',
          params: reactive({
            callTimeStart: tabsItem.value.startTime,
            callTimeEnd: tabsItem.value.endTime,
            classifyCodes: classifyType.value == '1' ? tabsItem.value.code : '',
            hotwords: value.name,
            code: detailData.value.classifyCode,
            page: 1,
            size: 50,
            inputParams: value.name,
          }),
          type: detailData.value.classifyType == 1 ? 'ai' : 'ct',
        },
      ];
      policeTabs.value = Params;
      policeName.value = value.name;
      visible.value = true;
    };

    //时段分析点击事件
    const timeClick = (index, item) => {
      const Params = [
        {
          name: '',
          url: '/aitype/persona/queryPersonCaseList',
          params: reactive({
            callTimeStart: tabsItem.value.startTime,
            callTimeEnd: tabsItem.value.endTime,
            classifyCodes: classifyType.value == '1' ? detailData.value.classifyCode : '',
            callSummaryCodes: classifyType.value == '2' ? detailData.value.classifyCode : '',
            dealSummaryCodes: classifyType.value == '3' ? detailData.value.classifyCode : '',
            date: timeList.value[index].mark,
            groupField: groupField.value,
            page: 1,
            size: 50,
          }),
          type: detailData.value.classifyType == 1 ? 'ai' : 'ct',
        },
      ];
      policeTabs.value = Params;
      if (groupField.value === 'hour') {
        policeName.value = '小时' + item.name;
      } else if (groupField.value === 'day') {
        policeName.value = '天' + item.name;
      } else if (groupField.value === 'week') {
        policeName.value = '周' + item.name;
      } else if (groupField.value === 'month') {
        policeName.value = '月' + item.name;
      } else if (groupField.value === 'year') {
        policeName.value = '年' + item.name;
      } else if (groupField.value === 'dayRange') {
        policeName.value = '时间段' + item.name;
      }
      visible.value = true;
    };

    //预警辖区单位分布点击事件
    const companyClick = (index, item) => {
      const Params = [
        {
          name: legend.value[0],
          url: '/aitype/caseInfo/queryCaseInfo',
          params: reactive({
            callTimeStart: tabsItem.value.startTime,
            callTimeEnd: tabsItem.value.endTime,
            xqdwCode: item.xqdwCode,
            classifyCodes: classifyType.value == '1' ? detailData.value.classifyCode : '',
            callSummaryCodes: classifyType.value == '2' ? detailData.value.classifyCode : '',
            dealSummaryCodes: classifyType.value == '3' ? detailData.value.classifyCode : '',
            page: 1,
            size: 50,
          }),
          type: detailData.value.classifyType == 1 ? 'ai' : 'ct',
        },
        {
          name: legend.value[1],
          url: '/aitype/caseInfo/queryCaseInfo',
          params: reactive({
            callTimeStart:
              tabsItem.value.type == 'H' ? tabsItem.value.sqStartTime : tabsItem.value.tqStartTime,
            callTimeEnd:
              tabsItem.value.type == 'H' ? tabsItem.value.sqEndTime : tabsItem.value.tqEndTime,
            xqdwCode: item.xqdwCode,
            classifyCodes: classifyType.value == '1' ? detailData.value.classifyCode : '',
            callSummaryCodes: classifyType.value == '2' ? detailData.value.classifyCode : '',
            dealSummaryCodes: classifyType.value == '3' ? detailData.value.classifyCode : '',
            page: 1,
            size: 50,
          }),
          type: detailData.value.classifyType == 1 ? 'ai' : 'ct',
        },
      ];
      policeTabs.value = Params;
      policeName.value = item.xqdwName;
      visible.value = true;
    };

    //预警手机号报警量统计点击事件
    const statClick = (index, item) => {
      const Params = [
        {
          name: '',
          url: '/aitype/caseInfo/queryCaseInfo',
          params: reactive({
            callTimeStart: tabsItem.value.startTime,
            callTimeEnd: tabsItem.value.endTime,
            callPhone: item.callPhone,
            inputParams: item.callPhone,
            classifyCodes: classifyType.value == '1' ? detailData.value.classifyCode : '',
            callSummaryCodes: classifyType.value == '2' ? detailData.value.classifyCode : '',
            dealSummaryCodes: classifyType.value == '3' ? detailData.value.classifyCode : '',
            page: 1,
            size: 50,
          }),
          type: detailData.value.classifyType == 1 ? 'ai' : 'ct',
        },
      ];
      policeTabs.value = Params;
      policeName.value = item.callPhone;
      visible.value = true;
    };

    //警情分析
    const queryThemeBarStat = async () => {
      let StatParams = {
        callTimeStart: tabsItem.value.startTime,
        callTimeEnd: tabsItem.value.endTime,
        themeCode: detailData.value.classifyType === '1' ? detailData.value.classifyCode : '',
        callSummaryCodes:
          detailData.value.classifyType === '2' ? detailData.value.classifyCode : '',
        dealSummaryCodes:
          detailData.value.classifyType === '3' ? detailData.value.classifyCode : '',
        xqdwCode: xqdwCode.value,
        dealFlag:
          detailData.value.classifyType === '1'
            ? null
            : detailData.value.classifyType === '2'
            ? '1'
            : '2',
      };
      const res = await getQueryThemeBarStat(StatParams);
      if (res.code === 200) {
        classifyList.value = res.data.classifyList;
        callList.value = res.data.aiCallList;
        dealList.value = res.data.aiDealList;
      }
    };

    //报告导出
    const imageOpts = ref<any>([]);
    const indexID = ref<any>([]);
    const headline = ref<any>([
      '一.',
      '二.',
      '三.',
      '四.',
      '五.',
      '六.',
      '七.',
      '八.',
      '九.',
      '十.',
      '十一.',
    ]);
    const saveImgClick = () => {
      Modal.confirm({
        title: '提示',
        icon: createVNode(ExclamationCircleOutlined),
        content: '是否导出报告？',
        okText: '确认',
        cancelText: '取消',
        onOk() {
          spinning.value = !spinning.value;
          setTimeout(() => {
            saveImg();
          }, 500);
        },
      });
    };

    const base64DataURLToArrayBuffer = dataURL => {
      const base64Regex = /^data:image\/(png|jpg|svg|svg\+xml);base64,/;
      if (!base64Regex.test(dataURL)) {
        return false;
      }
      const stringBase64 = dataURL.replace(base64Regex, '');
      let binaryString;
      if (typeof window !== 'undefined') {
        binaryString = window.atob(stringBase64);
      }
      //   else {
      //     binaryString = new Buffer(stringBase64, 'base64').toString('binary');
      //   }
      const len = binaryString.length;
      const bytes = new Uint8Array(len);
      for (let i = 0; i < len; i++) {
        const ascii = binaryString.charCodeAt(i);
        bytes[i] = ascii;
      }
      return bytes.buffer;
    };
    const ifValue = (index: number, image: string, name: string, titleId: number) => {
      if (index === 0) {
        const ruleValue = ref<any>(document.getElementById('ruleValue'));

        return {
          Template0: {
            name: headline.value[titleId] + name,
            image: image,
            value: ruleValue.value.innerText.split('类型警情')[1],
          },
        };
      } else if (index === 2) {
        return {
          Template2: {
            name: headline.value[titleId] + name,
            image: image,
            value: companyList.value.slice(0, 5),
          },
        };
      } else if (index === 3) {
        return {
          Template3: {
            name: headline.value[titleId] + name,
            image: image,
            value: hotWordList.value.slice(0, 5),
          },
        };
      } else if (index === 4) {
        return {
          Template4: {
            name: headline.value[titleId] + name,
            image: image,
          },
        };
      } else if (index === 5) {
        const total = computed(() =>
          classifyList.value.reduce((total, currentValue) => {
            return total + currentValue['caseNum'];
          }, 0),
        );
        return {
          Template5: {
            name: headline.value[titleId] + name,
            image: image,
            value: classifyList.value.slice(0, 5),
            total: '警情总数量' + total.value + '起',
          },
        };
      } else if (index === 6) {
        return {
          Template6: {
            name: headline.value[titleId] + name,
            image: image,
            value: callList.value.slice(0, 5),
            total: '共' + callList.value.length + '个分类',
          },
        };
      } else if (index === 7) {
        return {
          Template7: {
            name: headline.value[titleId] + name,
            image: image,
            value: dealList.value.slice(0, 5),
            total: '共' + dealList.value.length + '个分类',
          },
        };
      } else if (index === 8) {
        return {
          Template8: {
            name: headline.value[titleId] + name,
            image: image,
            value: ageData.value,
          },
        };
      } else if (index === 9) {
        return {
          Template9: {
            name: headline.value[titleId] + name,
            image: image,
            value: sexData.value,
          },
        };
      } else if (index === 10) {
        return {
          Template10: {
            name: headline.value[titleId] + name,
            image: image,
            value: timeList.value,
          },
        };
      }
    };

    const saveImg = () => {
      imageOpts.value = [];
      if (detailData.value.classifyType === '1') {
        indexID.value = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
      } else {
        indexID.value = [0, 2, 3, 4, 6, 7, 8, 9, 10];
      }

      imageOpts.value[0] = {
        top: {
          title: '【' + detailData.value.modelName + '】AI预警分析报告',
          exportData: '报告导出时间：' + moment().format('YYYY-MM-DD HH:mm:ss'),
        },
      };
      document.documentElement.scrollTop = 0;
      document.body.scrollTop = 0;
      indexID.value.forEach((item, index) => {
        let name = document.getElementsByClassName('canvasName')[index].innerHTML;
        if (item == 1) {
          const subscriptName = ref<any>([]);
          subscriptName.value = {
            name0: document.getElementsByClassName('subscript')[0].innerHTML,
            name1: document.getElementsByClassName('subscript')[1].innerHTML,
            name2: document.getElementsByClassName('subscript')[2].innerHTML,
            name3: document.getElementsByClassName('subscript')[3].innerHTML,
          };
          let labDataList = cloneDeep(labData.value);
          for (var i = 0; i < labDataList.length; i++) {
            labDataList[i].percent = labDataList[i].num === 0 ? '-' : labDataList[i].percent + '%';
          }
          imageOpts.value[2] = {
            Template1: {
              name: headline.value[1] + name,
              subscriptName: subscriptName.value,
              value: labDataList,
            },
          };
        } else {
          var node = ref<any>(document.getElementById('mycanvas' + item)); //传入的id名称

          var width = node.value.offsetWidth; //dom宽
          var height = node.value.offsetHeight; //dom高
          var scale = 2; //放大倍数 这个相当于清晰度 调大一点更清晰一点
          html2canvas(node.value, {
            width: width,
            height: height,
            backgroundColor: '#ffffff', //背景颜色 为null是透明
            scale: scale,
            x: 0,
            y: 0,
            scrollX: -3, //如果左边多个白边 设置该偏移-3 或者更多
            scrollY: 0,
            useCORS: true, //是否使用CORS从服务器加载图像 !!!
            allowTaint: true, //是否允许跨域图像污染画布  !!!
          }).then(canvas => {
            imageOpts.value[index + 1] = ifValue(item, canvas.toDataURL(), name, index);
            if (index + 1 == indexID.value.length) {
              exportWord();
            }
          });
        }
      });
    };
    const exportWord = () => {
      // 判断有无附加商品来选择word模版
      // 读取并获得模板文件的二进制内容
      JSZipUtils.getBinaryContent(
        (window as any).g.staticUrl + 'docx/earlyWarning.docx',
        function (error, content) {
          // input.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据
          // 抛出异常
          if (error) {
            throw error;
          }
          let opts = {
            getImage: function (chartId) {
              return base64DataURLToArrayBuffer(chartId);
            },
            getSize: function () {
              return [600, 250];
            },
          };
          const imageModule = new ImageModule(opts);
          // 创建一个JSZip实例，内容为模板的内容
          let zip = new PizZip(content);
          // 创建并加载docxtemplater实例对象
          let doc = new docxtemplater();
          doc.loadZip(zip);
          doc.attachModule(imageModule);

          // 设置模板变量的值
          doc.setData({
            // 导出价格表全部信息
            imageOpts: imageOpts.value,
          });
          try {
            // 用模板变量的值替换所有模板变量
            doc.render();
          } catch (error) {
            spinning.value = !spinning.value;
            throw error;
          }
          // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
          let out = doc.getZip().generate({
            type: 'blob',
            mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
          });
          // 将目标文件对象保存为目标类型的文件，并命名
          saveAs(out, '预警报告.docx');
          spinning.value = !spinning.value;
        },
      );
    };

    onMounted(() => {
      queryYjResultList();
    });

    return {
      //Deng
      classifyType,
      handleperiod,
      spinning,
      handletwoLine,
      value,
      detailData,
      tasChange,
      tabsItem,
      handleHttp,
      ageData,
      sexData,
      setPeriod,
      handlequeryYjClassStat,
      labData,
      livisible,
      listTile,
      portionUrl,
      params,
      renderClickHandle,
      renderClickHandleSex,
      trendData,
      period,
      time,
      setimaIndex,
      ratio,
      topicType,
      handleIssue,
      issueParams,
      issueQuery,
      basicContentRef,
      //Xie
      visible,
      policeName,
      hotWordList,
      classifyList,
      callList,
      dealList,
      className,
      groupField,
      timeList,
      timeStat,
      companyList,
      statList,
      policeTabs,
      classifyClick,
      callClick,
      dealClick,
      clickEchart,
      timeClick,
      statClick,
      companyClick,
      legend,
      classifyOptions,
      callOptions,
      dealOptions,
      timeOptions,
      saveImgClick,
    };
  },
});
</script>

<style scoped lang="less">
.icon-AIjiaobiao {
  color: #e99220;
}
.icon-jiejingjiaobiao {
  color: #1ccaff;
}
.icon-fankuijiaobiao {
  color: #3191ff;
}
.icon-AI:before {
  position: absolute;
  top: 10px;
  left: 0px;
  color: #e99220;
  font-size: 38px;
  content: '\e6ac';
}
.icon-jiejing:before {
  position: absolute;
  top: 10px;
  left: 0px;
  color: #1ccaff;
  font-size: 38px;
  content: '\e6b1';
}
.icon-fankui1:before {
  position: absolute;
  top: 10px;
  left: 0px;
  color: #3191ff;
  font-size: 38px;
  content: '\e6b2';
}
.handleIcon {
  position: absolute;
  top: -2px;
  left: -2px;
  z-index: 9;
  width: 30px;

  color: #e99220;

  font-size: 40px;
}
:deep(.ant-card-head) {
  font-weight: 400;
  font-size: 18px;
  font-family: Source Han Sans CN;
  line-height: 22px;
  border-bottom: 0;
  border-radius: 0px;
}
:deep(.ant-card-body) {
  padding: 0;
}
.radios {
  :deep(.ant-radio-group-solid
      .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)) {
    background: #4d5060;
    border: none;
    border-bottom: 3px solid #205ee9 !important;
  }
  :deep(.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::before) {
    background: none;
  }
}
.echats {
  :deep(.ant-card-small > .ant-card-head) {
    background: #34363c;
  }
}
.echatsAI {
  :deep(.ant-card-head) {
    color: #e99220;
    border: 1px solid #e99220;
  }
}
.echatsJie {
  :deep(.ant-card-head) {
    color: #1ccaff;
    border: 1px solid #1ccaff;
  }
}
.echatsFan {
  :deep(.ant-card-head) {
    color: #3191ff;
    border: 1px solid #3191ff;
  }
}
.tags-box {
  .tag-style + .tag-style {
    margin-left: 10px;
  }
  .tag-ai {
    color: #e99220;
    font-size: 12px;
    border: 1px solid #e99220;
    & > a {
      display: inline-block;
      width: 16px;
      height: 16px;
      color: #31343d;
      line-height: 16px;
      text-align: center;
      background: #e99220;
    }
  }
  .tag-jj {
    color: #1ccaff;
    font-size: 12px;
    border: 1px solid #1ccaff;
    & > a {
      display: inline-block;
      width: 16px;
      height: 16px;
      color: #31343d;
      line-height: 16px;
      text-align: center;
      background: #1ccaff;
    }
  }
  .tag-fk {
    color: #ff2b4d;
    font-size: 12px;
    border: 1px solid #ff2b4d;
    & > a {
      display: inline-block;
      width: 16px;
      height: 16px;
      color: #31343d;
      line-height: 16px;
      text-align: center;
      background: #ff2b4d;
    }
  }
  .tag-xq {
    color: #3191ff;
    font-size: 12px;
    border: 1px solid #3191ff;
    & > a {
      display: inline-block;
      width: 16px;
      height: 16px;
      color: #31343d;
      line-height: 16px;
      text-align: center;
      background: #3191ff;
    }
  }
  .tag-ai,
  .tag-jj,
  .tag-fk {
    text-decoration: none !important;
    & > a {
      text-decoration: none !important;
    }
  }
}
.yjhuang {
  padding: 0 3px;
  color: #ecd60d;
  background: rgba(236, 214, 13, 0.2);
}
.yjhong {
  padding: 0 3px;
  color: #ff2b4d;
  background: rgba(255, 43, 77, 0.2);
}
.yjcheng {
  padding: 0 3px;
  color: #ff6f1c;
  background: rgba(255, 111, 28, 0.2);
}
.yjlan {
  padding: 0 3px;
  color: #1cdaff;
  background: rgba(28, 218, 255, 0.2);
}
.imgps {
  height: 14px;
  margin-bottom: 5px;
}
.callSize {
  color: rgba(9, 65, 82, 1);
  font-size: 70px;
  text-shadow: -1px 0 rgba(28, 202, 255, 1), 0 1px rgba(28, 202, 255, 1),
    1px 0 rgba(28, 202, 255, 1), 0 -1px rgba(28, 202, 255, 1);
}
.dealSize {
  color: rgba(20, 55, 96, 1);
  font-size: 70px;
  text-shadow: -1px 0 rgba(49, 145, 255, 1), 0 1px rgba(49, 145, 255, 1),
    1px 0 rgba(49, 145, 255, 1), 0 -1px rgba(49, 145, 255, 1);
}
.ratio {
  flex: 1;
  float: left;
  width: 80px;
  min-width: 0;
  padding-right: 10px;
  padding-left: 10px;
  overflow: hidden;
  font-weight: normal;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pietitle {
  margin: 0 auto;
  margin-top: -80px;
  font-size: 24px;
  text-align: center;
}
.semicircle {
  width: 100%;
  height: 170px;
  margin: 0 auto;
  pointer-events: none;
}
.iconPosition {
  position: absolute;
  top: 7px;
  left: -2px;
  z-index: 9;
  font-size: 40px;
}
</style>
